<template>
  <div style="width:100%;height:100%;">
    <el-row style="width:100%;height:80%;padding:20px 0;">
      <el-col :span="6" class="colImg">
        <img src="../../assets/images/user.png" alt="">
      </el-col>
      <el-col :span="18" style="padding-left:40px">
        <div style="background: rgba(13,68,98,0.6);padding:5px 0;margin-bottom:20px;">
          <i class="el-icon-warning-outline" style="font-size:30px;"></i>
          <span style="color:#fbc44a">请插入USBKey设备,作为登录系统管理员凭证</span>
        </div>
      </el-col>
      <el-col :span="6" class="colImgs">
        <el-row>
          <img src="../../assets/images/loading.png" class="imgSize" alt="">
        </el-row>
        <el-row style="margin-top:50px;">
          <div>
            <p class="num">1</p>
            <p class="btn" style="color:#7dc50f;">识读USBKey</p>
          </div>

        </el-row>
      </el-col>
      <!-- <el-col :span="1" class="colImgs" >
                <span class="el-icon-right" style="position: absolute;  top: 50%;  margin-top: -1%;"></span>
            </el-col> -->
      <el-col :span="6" class="colImgs" style="margin-left:150px;">
        <el-row>
          <el-form :model="infoForm" label-width="110px" style="color:#606266; background: #8F999E; padding: 60px; border-radius: 10px;">
            <el-form-item label="姓名：">
              <el-input v-model="infoForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号：">
              <el-input v-model="infoForm.identity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="保障卡号：">
              <el-input v-model="infoForm.guarantee" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row style="margin-top:50px;">
          <div>
            <p class="num">2</p>
            <p class="btn" style="color:#F77159;" @click="gitUserAdmin">任命管理员</p>
          </div>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      infoForm: {},
    };
  },
  methods: {
    gitUserAdmin() {},
  },
};
</script>

<style  scoped>
.colImg {
  border-right: 1px solid #ddd;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.colImgs {
  height: 70%;

  margin-left: 100px;
  text-align: center;
}
.imgSize {
  padding: 40px;
  background: #94afbe;
  border-radius: 10px;
}
.inp {
  width: 60%;
}
:deep(.el-radio__inner) {
  width: 20px;
  height: 20px;
}
:deep(.el-radio__label) {
  color: #ddd;
  font-size: 16px;
}
.btn {
  display: inline-block;
  cursor: pointer;
  font-size: 20px;
  background: #ddd;
  border-radius: 20px;
  height: 80px;
  width: 80%;
  line-height: 80px;
  text-align: center;
  font-weight: 600;
  padding: 0 50px;
}
.btnContent {
  display: flex;
  justify-content: space-evenly;
}
.num {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50%;
  background: #409eff;
  margin-right: 40px;
}

:deep(.el-dialog__body .el-upload, .el-dialog__body .el-upload-dragger) {
  width: 60% !important;
  background: none;
}
.btn {
  cursor: pointer;
  font-size: 20px;
  background: #ddd;
  border-radius: 20px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-weight: 600;
  padding: 0 50px;
}
.btnContent {
  display: flex;
  justify-content: space-evenly;
}
:deep([data-v-0efe6000] .el-form-item__label) {
  font-size: 18px;
  color: yellow;
  text-align: justify;
}
</style>